<template>
  <view class="demo-comment-list">
    <fu-comment-list
      :comments="comments"
      :load-more-status="loadMoreStatus"
      @like-click="onLikeClick"
      @image-click="onImageClick"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      loadMoreStatus: 'more',
      comments: [
        {
          id: 1,
          userName: '张三',
          avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
          rate: 5,
          time: '2024-01-20',
          content: '商品质量非常好，物流很快，包装也很好，值得购买！',
          images: [
            'https://cdn.uviewui.com/uview/album/1.jpg',
            'https://cdn.uviewui.com/uview/album/2.jpg',
            'https://cdn.uviewui.com/uview/album/3.jpg'
          ],
          goods: '商品规格：黑色 XL码',
          reply: '感谢您的支持，欢迎下次再来选购！',
          likes: 12,
          isLiked: false
        },
        {
          id: 2,
          userName: '李四',
          avatar: 'https://cdn.uviewui.com/uview/album/2.jpg',
          rate: 4,
          time: '2024-01-19',
          content: '商品还不错，就是发货有点慢。',
          goods: '商品规格：白色 L码',
          likes: 3,
          isLiked: true
        },
        {
          id: 3,
          userName: '王五',
          avatar: 'https://cdn.uviewui.com/uview/album/3.jpg',
          rate: 5,
          time: '2024-01-18',
          content: '很满意的一次购物，客服态度很好！',
          images: [
            'https://cdn.uviewui.com/uview/album/4.jpg',
            'https://cdn.uviewui.com/uview/album/5.jpg'
          ],
          goods: '商品规格：红色 M码',
          likes: 8,
          isLiked: false
        },
        {
          id: 4,
          userName: '小明',
          avatar: 'https://cdn.uviewui.com/uview/album/4.jpg',
          rate: 5,
          time: '2024-01-17',
          content: '第二次购买了，质量真的很好，而且这次还送了小礼品，很贴心！',
          images: [
            'https://cdn.uviewui.com/uview/album/6.jpg',
            'https://cdn.uviewui.com/uview/album/7.jpg',
            'https://cdn.uviewui.com/uview/album/8.jpg',
            'https://cdn.uviewui.com/uview/album/9.jpg'
          ],
          goods: '商品规格：蓝色 XXL码',
          reply: '感谢您的持续支持，我们会继续努力提供更好的服务！',
          likes: 25,
          isLiked: true
        },
        {
          id: 5,
          userName: '小红',
          avatar: 'https://cdn.uviewui.com/uview/album/5.jpg',
          rate: 3,
          time: '2024-01-16',
          content: '做工还可以，但是尺码偏小了，建议大家买大一码。',
          goods: '商品规格：灰色 M码',
          likes: 15,
          isLiked: false
        },
        {
          id: 6,
          userName: '小华',
          avatar: 'https://cdn.uviewui.com/uview/album/6.jpg',
          rate: 4,
          time: '2024-01-15',
          content: '物流很快，包装也很好，穿着很舒服，就是价格稍微贵了点。',
          images: [
            'https://cdn.uviewui.com/uview/album/10.jpg'
          ],
          goods: '商品规格：白色 L码',
          likes: 6,
          isLiked: false
        },
        {
          id: 7,
          userName: '小丽',
          avatar: 'https://cdn.uviewui.com/uview/album/7.jpg',
          rate: 5,
          time: '2024-01-14',
          content: '颜色很正，款式也很好看，朋友们都说好看！',
          images: [
            'https://cdn.uviewui.com/uview/album/11.jpg',
            'https://cdn.uviewui.com/uview/album/12.jpg'
          ],
          goods: '商品规格：粉色 S码',
          reply: '谢谢您的支持，欢迎分享给更多朋友！',
          likes: 32,
          isLiked: false
        },
        {
          id: 8,
          userName: '小强',
          avatar: 'https://cdn.uviewui.com/uview/album/8.jpg',
          rate: 4,
          time: '2024-01-13',
          content: '面料很舒服，透气性也不错，适合运动时穿。',
          goods: '商品规格：黑色 XL码',
          likes: 9,
          isLiked: false
        },
        {
          id: 9,
          userName: '小美',
          avatar: 'https://cdn.uviewui.com/uview/album/9.jpg',
          rate: 5,
          time: '2024-01-12',
          content: '衣服很漂亮，而且客服态度特别好，耐心解答我的问题，点赞！',
          images: [
            'https://cdn.uviewui.com/uview/album/13.jpg',
            'https://cdn.uviewui.com/uview/album/14.jpg',
            'https://cdn.uviewui.com/uview/album/15.jpg'
          ],
          goods: '商品规格：红色 M码',
          reply: '为您提供优质服务是我们的责任，欢迎再次光临！',
          likes: 45,
          isLiked: true
        },
        {
          id: 10,
          userName: '小杨',
          avatar: 'https://cdn.uviewui.com/uview/album/10.jpg',
          rate: 5,
          time: '2024-01-11',
          content: '质量很好，穿了一个月了还是很新，洗了也不掉色，很满意！',
          goods: '商品规格：蓝色 L码',
          likes: 28,
          isLiked: false
        }
      ]
    }
  },
  
  methods: {
    onLikeClick({ index, item }) {
      this.comments[index].isLiked = !item.isLiked
      this.comments[index].likes = item.isLiked ? 
        (item.likes || 0) - 1 : 
        (item.likes || 0) + 1
      
      uni.showToast({
        title: item.isLiked ? '取消点赞' : '点赞成功',
        icon: 'none'
      })
    },
    
    onImageClick({ images, index }) {
      console.log('点击图片:', index, images)
    }
  }
}
</script>

<style lang="scss">
.demo-comment-list {
  min-height: 100vh;
  background-color: #f5f5f5;
}
</style> 